<template>
    <div class="shoe-store">
      <!-- 导航栏 -->
      <el-menu
        default-active="1"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#1a1a1a"
        text-color="#fff"
        active-text-color="#ff4d4f"
        @select="handleSelect"
        border-bottom="false"
      >
        <div class="logo">
          <span class="brand">鞋城履行</span>
        </div>
        <el-menu-item index="1" @click="$router.push('/main/first')">首页</el-menu-item>
        <el-menu-item index="2" @click="$router.push('/main/goods')">鞋类大全</el-menu-item>
        <el-menu-item index="4">购物车</el-menu-item>
        <el-menu-item index="5">订单</el-menu-item>
        <div class="user-actions">
          <el-icon class="icon" @click="showSearch = !showSearch"><Search /></el-icon>
          <el-icon class="icon"><User/></el-icon>
          <el-icon class="icon"><ShoppingCart /></el-icon>
        </div>
      </el-menu>
  
      <!-- 搜索框 (点击搜索图标显示/隐藏) -->
      <div v-if="showSearch" class="search-container">
        <el-input 
          placeholder="搜索鞋款、品牌或系列..." 
          v-model="searchQuery"
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button icon="Search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </div>
  
      <!-- 轮播图 -->
      <el-carousel height="500px" indicator-position="none" autoplay>
        <el-carousel-item v-for="(slide, index) in carouselSlides" :key="index">
          <div class="carousel-item">
            <img :src="slide.imgUrl" alt="鞋款轮播图" class="carousel-img">
            <div class="carousel-content">
              <h2 class="carousel-title">{{ slide.title }}</h2>
              <p class="carousel-subtitle">{{ slide.subtitle }}</p>
              <el-button class="carousel-btn" @click="viewCollection(slide.collectionId)">
                立即查看
              </el-button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
  
      <!-- 热门分类 -->
      <section class="category-section">
        <h2 class="section-title">热门分类</h2>
        <div class="category-grid">
          <div v-for="category in categories" :key="category.id" class="category-card">
            <img :src="category.imgUrl" alt="分类图片" class="category-img">
            <p class="category-name">{{ category.name }}</p>
          </div>
        </div>
      </section>
  
      <!-- 精选鞋款 -->
      <section class="featured-section">
        <div class="section-header">
          <h2 class="section-title">精选鞋款</h2>
          <el-button type="text" class="view-all">查看全部</el-button>
        </div>
        
        <div class="products-grid">
          <div v-for="product in featuredProducts" :key="product.id" class="product-card">
            <div class="product-img-container">
              <img :src="product.imgUrl" alt="鞋款图片" class="product-img">
              <div class="product-badges">
                <span v-if="product.isNew" class="badge new">新品</span>
                <span v-if="product.discount" class="badge discount">-{{ product.discount }}%</span>
              </div>
              <button class="add-to-cart-btn" @click="addToCart(product)">
                <el-icon><ShoppingCart /></el-icon>
              </button>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.desc }}</p>
              <div class="product-price">
                <span v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</span>
                <span class="current-price">¥{{ product.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 品牌专区 -->
      <section class="brand-section">
        <h2 class="section-title">品牌专区</h2>
        <div class="brand-grid">
          <div v-for="brand in brands" :key="brand.id" class="brand-item">
            <img :src="brand.imgUrl" alt="品牌logo" class="brand-logo">
          </div>
        </div>
      </section>
  
      <!-- 新品上市 -->
      <section class="new-arrivals-section">
        <div class="section-header">
          <h2 class="section-title">新品上市</h2>
          <el-button type="text" class="view-all">查看全部</el-button>
        </div>
        
        <div class="new-arrivals-slider">
          <div v-for="product in newProducts" :key="product.id" class="new-arrival-item">
            <img :src="product.imgUrl" alt="新品鞋款" class="new-arrival-img">
            <h3 class="new-arrival-name">{{ product.name }}</h3>
            <p class="new-arrival-price">¥{{ product.price }}</p>
          </div>
        </div>
      </section>
  
      <!-- 底部信息 -->
      <footer class="footer">
        <div class="footer-content">
          <div class="footer-column">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">品牌故事</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">联系我们</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>客户服务</h3>
            <ul>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#">售后服务</a></li>
              <li><a href="#">配送信息</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>支付方式</h3>
            <ul>
              <li><a href="#">在线支付</a></li>
              <li><a href="#">货到付款</a></li>
              <li><a href="#">优惠券使用</a></li>
            </ul>
          </div>
          <div class="footer-column">
            <h3>关注我们</h3>
            <div class="social-icons">
              <el-icon class="social-icon"><Weibo /></el-icon>
              <el-icon class="social-icon"><Wechat /></el-icon>
              <el-icon class="social-icon"><Instagram /></el-icon>
            </div>
            <p class="app-download">下载我们的APP</p>
          </div>
        </div>
        <div class="copyright">
          <p>© 2023 KickShop. 保留所有权利</p>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { Search, User, ShoppingCart } from '@element-plus/icons-vue';
  import image1 from '../../photos/1.jpg'
  import image2 from '../../photos/2.jpg'
  import basketball from '../../photos/篮球鞋.jpg'
  import running from '../../photos/跑步鞋.jpg'
  import flatshoes from '../../photos/板鞋.jpg'
  import footballshoes from '../../photos/足球鞋.jpg'
  import xlshoes from '../../photos/训练鞋.jpg'
  import xxshoes from '../../photos/休闲鞋.jpg'
  import nike from '../../photos/耐克.jpg'
  import kw from '../../photos/匡威.jpg'
  import ad from '../../photos/阿迪达斯.jpg'
  import ln from '../../photos/李宁.jpg'
  import hx from '../../photos/鸿星尔克.jpg'
  // 状态管理
  const showSearch = ref(false);
  const searchQuery = ref('');
  
  // 轮播图数据
  const carouselSlides = ref([
  {
    id: 1,
    imgUrl: image1,  // 最稳妥，无论组件放在哪里都能正确找到
    title: '夏季新品上市',
    subtitle: '探索最新款运动鞋',
    collectionId: 'summer-collection'
  },
  {
    id: 2,
    imgUrl: image2, // 限量版联名系列
    title: '限量版联名系列',
    subtitle: '即刻抢购，售完即止',
    collectionId: 'limited-edition'
  },
]);

  
  // 分类数据
  const categories = ref([
    { id: 1, name: '篮球鞋', imgUrl: basketball },
    { id: 2, name: '跑步鞋', imgUrl: running },
    { id: 3, name: '板鞋', imgUrl:  flatshoes},
    { id: 4, name: '足球鞋', imgUrl: footballshoes},
    { id: 5, name: '训练鞋', imgUrl: xlshoes},
    { id: 6, name: '休闲鞋', imgUrl: xxshoes }
  ]);
  
  // 精选商品数据
  const featuredProducts = ref([
    {
      id: 1,
      name: 'Air Zoom 跑步鞋',
      desc: '轻盈缓震，舒适体验',
      price: 899,
      originalPrice: 1099,
      imgUrl: 'https://picsum.photos/id/1000/400/400',
      isNew: false,
      discount: 18
    },
    {
      id: 2,
      name: 'Dunk Low 板鞋',
      desc: '经典款式，百搭时尚',
      price: 799,
      imgUrl: 'https://picsum.photos/id/1001/400/400',
      isNew: true,
      discount: 0
    },
    {
      id: 3,
      name: 'LeBron 19 篮球鞋',
      desc: '专业支撑，卓越性能',
      price: 1599,
      originalPrice: 1799,
      imgUrl: 'https://picsum.photos/id/1002/400/400',
      isNew: false,
      discount: 11
    },
    {
      id: 4,
      name: 'Ultraboost 运动鞋',
      desc: '顶级缓震，极致舒适',
      price: 1299,
      imgUrl: 'https://picsum.photos/id/1003/400/400',
      isNew: false,
      discount: 0
    },
    {
      id: 5,
      name: 'React 跑步鞋',
      desc: '响应迅速，持久耐穿',
      price: 999,
      originalPrice: 1199,
      imgUrl: 'https://picsum.photos/id/1004/400/400',
      isNew: false,
      discount: 17
    },
    {
      id: 6,
      name: 'Blazer 休闲鞋',
      desc: '复古风格，潮流必备',
      price: 699,
      imgUrl: 'https://picsum.photos/id/1006/400/400',
      isNew: true,
      discount: 0
    }
  ]);
  
  // 品牌数据
  const brands = ref([
    { id: 1, imgUrl: nike },
    { id: 2, imgUrl:kw },
    { id: 3, imgUrl: ln},
    { id: 4, imgUrl: hx },
    { id: 5, imgUrl: ad }
  ]);
  
  // 新品数据
  const newProducts = ref([
    { id: 1, name: 'Air Max 270', price: 1099, imgUrl: 'https://picsum.photos/id/1010/300/300' },
    { id: 2, name: 'Kyrie 8', price: 1299, imgUrl: 'https://picsum.photos/id/1012/300/300' },
    { id: 3, name: 'Free Run 5.0', price: 899, imgUrl: 'https://picsum.photos/id/1013/300/300' },
    { id: 4, name: 'Pegasus 39', price: 999, imgUrl: 'https://picsum.photos/id/1014/300/300' },
    { id: 5, name: 'ZoomX Vaporfly', price: 1599, imgUrl: 'https://picsum.photos/id/1015/300/300' }
  ]);
  
  // 方法
  const handleSelect = (key, keyPath) => {
    console.log(key, keyPath);
  };
  
  const handleSearch = () => {
    console.log('搜索:', searchQuery.value);
    // 实现搜索逻辑
  };
  
  const viewCollection = (collectionId) => {
    console.log('查看集合:', collectionId);
    // 导航到对应集合页面
  };
  
  const addToCart = (product) => {
    console.log('添加到购物车:', product);
    // 实现添加到购物车逻辑
    // 可以在这里显示添加成功的提示
  };
  </script>
  
  <style scoped>
.shoe-store {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* ===== 导航栏 ===== */
.el-menu-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo {
  font-size: 26px;
  font-weight: 700;
  margin-right: 40px;
  background: linear-gradient(45deg, #ff4d4f, #ff7875);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-menu-item {
  position: relative;
  transition: color 0.3s;
}
.el-menu-item:hover {
  color: #ff4d4f !important;
}
.el-menu-item::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: #ff4d4f;
  transition: transform 0.3s ease;
}
.el-menu-item:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon {
  font-size: 24px; /* 稍微增大图标 */
  cursor: pointer;
  color: #fff; /* 使图标默认是白色 */
  transition: transform 0.3s, color 0.3s, box-shadow 0.3s; /* 添加阴影过渡效果 */
}

.icon:hover {
  color: #ff4d4f;
  transform: scale(1.2);
}

/* ===== 搜索框 ===== */
.search-container {
  padding: 15px 50px;
  background-color: #1a1a1a;
}
.search-input {
  max-width: 800px;
  margin: 0 auto;
}

/* ===== 轮播图 ===== */
.el-carousel {
  margin-bottom: 50px;
}
.carousel-item {
  position: relative;
  height: 100%;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.5), transparent 60%);
}
.carousel-content {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  z-index: 2;
}
.carousel-title {
  font-size: 48px;
  margin-bottom: 20px;
  animation: fadeInUp 1s;
}
.carousel-subtitle {
  font-size: 20px;
  margin-bottom: 30px;
  animation: fadeInUp 1s 0.3s backwards;
}
.carousel-btn {
  background: linear-gradient(45deg, #ff4d4f, #ff7875);
  color: white;
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s;
  animation: fadeInUp 1s 0.6s backwards;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.carousel-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

/* ===== 分类区域 ===== */
.category-section {
  padding: 0 50px 50px;
}
.section-title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: #ff4d4f;
  margin: 10px auto 0;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.category-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.category-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.category-card:hover .category-img {
  transform: scale(1.05);
}
.category-name {
  text-align: center;
  padding: 15px 0;
  font-weight: 600;
}

/* ===== 精选商品 ===== */
.featured-section {
  padding: 0 50px 50px;
  background-color: white;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.view-all {
  color: #ff4d4f;
  font-size: 16px;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.product-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.product-img-container {
  position: relative;
}
.product-img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-img {
  transform: scale(1.05);
}
.product-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: white;
  font-weight: 500;
}
.new {
  background-color: #1890ff;
}
.discount {
  background-color: #ff4d4f;
}
.add-to-cart-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
}
.product-card:hover .add-to-cart-btn {
  opacity: 1;
  transform: scale(1);
}
.add-to-cart-btn:hover {
  background-color: #d9363e;
  transform: scale(1.15);
}
.product-info {
  padding: 18px;
}
.product-name {
  font-size: 18px;
  margin-bottom: 6px;
  color: #333;
  font-weight: 600;
}
.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  height: 40px;
  overflow: hidden;
}
.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}
.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}
.current-price {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: 700;
  background: linear-gradient(45deg, #ff4d4f, #ff7875);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== 品牌专区 ===== */
.brand-section {
  padding: 50px;
  background: #fafafa;
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}
.brand-item {
  position: relative;
  background-color: white;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.brand-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.brand-logo {
  max-width: 150px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}
.brand-item:hover .brand-logo {
  filter: grayscale(0);
  transform: scale(1.1);
}
.brand-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255,77,79,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.brand-item:hover::after {
  opacity: 1;
}

/* ===== 新品上市 ===== */
.new-arrivals-section {
  padding: 50px;
  background-color: white;
}
.new-arrivals-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 20px;
  scrollbar-width: thin;
}
.new-arrivals-slider::-webkit-scrollbar {
  height: 6px;
}
.new-arrivals-slider::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
.new-arrival-item {
  min-width: 250px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease;
}
.new-arrival-item:hover {
  transform: translateY(-6px);
}
.new-arrival-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 15px;
  transition: transform 0.4s ease;
}
.new-arrival-item:hover .new-arrival-img {
  transform: scale(1.05);
}
.new-arrival-name {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 600;
}
.new-arrival-price {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: 700;
}

/* ===== 页脚 ===== */
.footer {
  background: linear-gradient(to right, #1a1a1a, #141414);
  color: white;
  padding: 50px;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
.footer-column h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}
.footer-column h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: #ff4d4f;
}
.footer-column ul {
  list-style: none;
  padding: 0;
}
.footer-column ul li {
  margin-bottom: 10px;
}
.footer-column a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s, text-decoration 0.3s;
}
.footer-column a:hover {
  color: #ff4d4f;
  text-decoration: underline;
}
.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.social-icon {
  font-size: 24px;
  color: #999;
  transition: color 0.3s, transform 0.3s;
  cursor: pointer;
}
.social-icon:hover {
  color: #ff4d4f;
  transform: scale(1.2);
}
.app-download {
  color: #999;
  font-size: 14px;
}
.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #333;
  color: #999;
  font-size: 14px;
}

/* ===== 动画效果 ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 992px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .el-menu-demo {
    padding: 0 20px;
  }
  .carousel-content {
    left: 50px;
  }
  .carousel-title {
    font-size: 32px;
  }
  .section-title {
    font-size: 24px;
  }
  .products-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-content {
    grid-template-columns: 1fr;
  }
  .carousel-title {
    font-size: 24px;
  }
  .carousel-subtitle {
    font-size: 16px;
  }
}
  </style>
  